<script setup>
import weather_jpg from '@/assets/images/weather.jpg';
</script>

<template>
    <el-card style="width: 500px">
        <template #header>
            <div class="card-header">
                <el-icon>
                    <Location />
                </el-icon>
                <span> 本地天气：保定市莲池区</span>
            </div>
        </template>
        <!-- <p v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</p> -->

        <el-row>
            <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                <div class="demo-image">
                    <el-image style="width: 100px; height: 100px" :src="weather_jpg" />
                </div>
            </el-col>
            <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
                <div class="grid-content ep-bg-purple-light">
                    <el-text class="mx-1" size="large">19:31</el-text>
                    <hr />
                    <p style=" font-size: smaller;">
                        今天预计天气晴朗。 最高气温33°
                    </p>
                </div>
            </el-col>
        </el-row>


        <!-- <template #footer>Footer content</template> -->
    </el-card>
</template>

<style scoped>
    .el-col {
        border-radius: 4px;
    }

    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }
</style>



<style scoped>
.demo-image .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  display: inline-block;
  width: 20%;
  box-sizing: border-box;
  vertical-align: top;
}
.demo-image .block:last-child {
  border-right: none;
}
.demo-image .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>